/*
 * @Description: 信用卡表单
 * @Author: tao.xie
 * @Date: 2019-03-21 11:28:24
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-04-02 11:49:19
 */

<template>
  <div>
    <!-- 银行卡输入 -->
    <bind-form-base-input
      ref="cardinput"
      name="银行卡号"
      placeHolder="请输入本人同名银行卡"
      :split="4"
      :maxLength="23"
      @input="handleBankCardInputChangeEvent"
    />

    <!-- CVN2码 -->
    <bind-form-base-input
      ref="cvn2input"
      name="CVN2码"
      placeHolder="请输入背面3位数安全码"
      @input="handleCVN2InputChangeEvent"
      :showDeleteIcon="false"
    >
      <!-- 问号图标插槽 -->
      <i
        class="icon iconfont icon-explain baseColorNoAcitve"
        @click="showCVN2Pop"
      ></i>
    </bind-form-base-input>

    <!-- 有效期 -->
    <bind-form-base-input
      name="有效期"
      placeHolder="请输入背面3位数安全码"
      :border="false"
    >
      <!-- 年月有效期的输入插槽 -->
      <div
        slot="input"
        class="flex-h flex-ve flex-hs flex1 valid-date-input-wrapper"
      >
        <div class="xb_border_bottom ccc">
          <input
            maxlength="2"
            v-model="currentInputMonth"
          />
        </div>
        <span>月 / </span>
        <div class="xb_border_bottom ccc">
          <input
            maxlength="2"
            v-model="currentInputYear"
          />
        </div>
        <span>年</span>
      </div>
      <!-- 问号图标插槽 -->
      <i
        class="icon iconfont icon-explain baseColorNoAcitve"
        @click="showValidDatePop"
      ></i>
    </bind-form-base-input>

    <!-- 手机号码输入 -->
    <bind-form-base-input
      name="预留手机号"
      placeHolder="请输入预留手机号"
      @input="handlePhoneNoInputChangeEvent"
      ref="phoneinput"
    />
    <!-- 验证码输入 -->
    <bind-form-base-input
      ref="msginput"
      name="验证码"
      placeHolder="请输入6位验证码"
      @input="handleVericationCodeInputChangeEvent"
      :showDeleteIcon="false"
      :maxLength="6"
    >
      <get-valid-code-button
        @vclick="willSendBindCardMsg"
        ref="getValidVodeButton"
      />
    </bind-form-base-input>

    <!-- 同意协议 -->
    <agreement
      class="
        agreement"
      ref="agreement"
    />

    <!-- 绑定按钮 -->
    <button
      class="bind-btn"
      :class="isBindButtonActive?'baseBgColorWithActive':'baseBgColorInvalid'"
      :disabled="!isBindButtonActive"
      @click="bind"
    >绑定</button>

  </div>
</template>

<script>
import BindFormBaseInput from './input/BindFormBaseInput'
import GetValidCodeButton from './input/GetValidCodeButton'
import Agreement from './Agreement'
import { validPhoneNo, validVercationCode, validBankCardNo, validCVN2Code, validMonth, validYear } from '../utils/StringValidUtils.js'
import CVN2PopDialog from './CVN2PopDialog'
import ValidDatePopDialog from './ValidDatePopDialog'
import { sendBindCardMsg, bindCreditCard } from '../api/api.js'
import CVN2PopDialogJS from '../components/CVN2PopDialogJS.js'
import ValidDatePopDialogJS from '../components/ValidDatePopDialogJS.js'
import BindResultJS from './BindResultJS.js'

export default {
  components: {
    'bind-form-base-input': BindFormBaseInput,
    'get-valid-code-button': GetValidCodeButton,
    'agreement': Agreement,
    'cvn2-pop-dialog': CVN2PopDialog,
    'valid-date-pop-dialog': ValidDatePopDialog
  },
  data() {
    return {
      currentInputBankCardNo: '',
      currentInputCVN2: '',
      currentInputMonth: '',
      currentInputYear: '',
      currentInputPhoneNo: '',
      currentInputVericationCode: '',
      isShowCVN2Pop: false,
      isShowDatePop: false,
      isShowShadow: false,
      bindCardOrderNo: '',
      isBindButtonActive: false
    }
  },
  watch: {
    currentInputMonth: function () { this.validForm() },
    currentInputYear: function () { this.validForm() }
  },
  methods: {
    showValidDatePop() {
      ValidDatePopDialogJS.show()
    },
    showCVN2Pop() {
      CVN2PopDialogJS.show()
    },
    handleBankCardInputChangeEvent(cardno) {
      this.currentInputBankCardNo = cardno
      this.validForm()
    },
    handleCVN2InputChangeEvent(cvn2) {
      this.currentInputCVN2 = cvn2
      this.validForm()
    },
    handlePhoneNoInputChangeEvent(phoneno) {
      this.currentInputPhoneNo = phoneno
      this.validForm()
      validPhoneNo(this.currentInputPhoneNo).then(() => {
        this.$refs.phoneinput.changeToWarnBorder(false)
      }).catch(() => {
        this.$refs.phoneinput.changeToWarnBorder(true)
      })
    },
    handleVericationCodeInputChangeEvent(code) {
      this.currentInputVericationCode = code
      this.validForm()
    },
    validForm() {
      Promise.all([validBankCardNo(this.currentInputBankCardNo), validCVN2Code(this.currentInputCVN2), validMonth(this.currentInputMonth), validYear(this.currentInputYear), validPhoneNo(this.currentInputPhoneNo), validVercationCode(this.currentInputVericationCode)]).then(() => {
        this.isBindButtonActive = true
      }).catch(() => {
        this.isBindButtonActive = false
      })
    },
    willSendBindCardMsg: async function () {
      Promise.all([validBankCardNo(this.currentInputBankCardNo), validCVN2Code(this.currentInputCVN2), validMonth(this.currentInputMonth), validYear(this.currentInputYear), validPhoneNo(this.currentInputPhoneNo)]).then(() => {
        this._sendBindCardMsg()
      }).catch(err => {
        this.$toastMsg(err.message)
      })
    },
    _sendBindCardMsg: async function () {
      try {
        let rs = await sendBindCardMsg(this.currentInputPhoneNo, this.currentInputBankCardNo)
        this.bindCardOrderNo = rs
        this.$refs.getValidVodeButton.run()
        this.$toastMsg('验证码已发送')
      } catch (err) {
        this.$refs.getValidVodeButton.reset()
      }
    },
    bind: async function () {
      if (this.$refs.agreement.isChoosed()) {
        try {
          await bindCreditCard(this.currentInputVericationCode, this.bindCardOrderNo, this.currentInputPhoneNo, this.currentInputBankCardNo, this.currentInputCVN2, this.currentInputYear + this.currentInputMonth)
          BindResultJS.show()
        } catch (err) {
        }
      } else {
        this.$toastMsg('请阅读并同意快捷支付协议！')
      }
    },
    // 清空所有输入框
    clearAllInput() {
      this.$refs.cardinput.clear()
      this.$refs.phoneinput.clear()
      this.$refs.cvn2input.clear()
      this.$refs.msginput.clear()
      this.currentInputMonth = ''
      this.currentInputYear = ''
    }
  }
}
</script>

<style scoped>
.valid-date-input-wrapper {
  margin-bottom: -20px;
}
/* 有效期内所有元素 */
.valid-date-input-wrapper > * {
  color: #333;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
}

/*有效期的输入框*/
.valid-date-input-wrapper input {
  width: 60px;
  padding-left: 40px;
  border: none;
  background: none;
  margin-bottom: 20px;
  line-height: 20px; /*no*/
  font-size: 14px; /*no*/
}
/* 月 */
.valid-date-input-wrapper > span:first-of-type {
  margin: 0px 20px 20px 20px;
}
/* 年 */
.valid-date-input-wrapper > span:nth-of-type(2) {
  margin: 0px 0px 20px 20px;
}

i {
  margin-right: 30px;
}
/* 同意条款 */
.agreement {
  margin-top: 84px;
}
/* 绑定按钮 */
.bind-btn {
  width: 690px;
  height: 80px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px; /*no*/
  line-height: 21px; /*no*/
  margin: 22px 0px 30px 30px;
}

/* 全屏幕遮罩层 */
.shadow-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
</style>
